<template>
	<view id="goodsDeatilContainer">
		<view class="goodsDeatilBox">
			<!-- 轮播图 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in goodDeatil.pics" :key="item.pics_id">
					<view @click="imagePreview(index)" class="swiper-item">
						<image :src="item.pics_big" mode="heightFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 商品信息 -->
			<!-- 判断goodDeatil.goods_name是否存在，解决价格和名字闪烁问题 -->
			<view v-if="goodDeatil.goods_name" class="itemInfoBox">
				<text class="itemPrice">￥ {{goodDeatil.goods_price}}</text>
				<view class="itemInfo">
					<view class="itemName">
						<text>{{goodDeatil.goods_name}}</text>
					</view>
					<view @click="collect" class="collect">
						<uni-icons v-if="!isCollect" type="star" size="18"></uni-icons>
						<uni-icons v-else type="star-filled" size="18"></uni-icons>
						<text>收藏</text>
					</view>
				</view>
				<text class="freight">快递:免运费</text>
			</view>
			<!-- 商品详情信息 -->
			<rich-text :nodes="goodDeatil.goods_introduce"></rich-text>
			<!-- 商品导航，加入购物车等 -->
			<view class="goods-carts">
				<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否收藏
				isCollect : false,
				goodsId : "",
				goodDeatil:{},
				// 购物车导航信息
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],		
			}
		},
		onLoad(options){
			this.goodsId = options.goods_id || ''
			this.getGoodDeatil()
		},
		methods: {
			async getGoodDeatil(){
				console.log(this.goodsId)
				const {data:res} = await uni.$http.get("/api/public/v1/goods/detail",{goods_id:this.goodsId})
				if(res.meta.status == 200){
					this.goodDeatil = res.message
					// 解决图片底部空白间隙的问题，解决webp无法在ios上显示问题
					this.goodDeatil.goods_introduce = this.goodDeatil.goods_introduce.replace(/<img/g,'<img style="display:block;"').replace(/webp/g,'jpg') 
				}else{
					return uni.$showMsg()
				}
			},
			// 图片预览
			imagePreview(index){
				uni.previewImage({
					current:index,
					urls:this.goodDeatil.pics.map(item => item.pics_big)
				})
			},
			// 购物车导航
			onClick(e) {
				if(e.content.text == "购物车"){
					uni.switchTab({
						url:'/pages/cart/cart'
					})
				}
			},
			// 购物车导航按钮
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			// 点击收藏按钮
			collect(){
				this.isCollect = !this.isCollect
			}
		}
	}
</script>

<style lang="scss">
.goodsDeatilBox{
	// 防止最底部内容被导航栏遮挡
	padding-bottom: 50px;
	swiper{
		height: 750rpx;
		.swiper-item{
			height: 100%;
			image{
				height: 100%;
			}
		}
	}
	.itemInfoBox{
		padding: 10px;
		padding-right: 0;
		.itemPrice{
			color: #c00000;
			font-size: 18px;
			margin: 10px 0;
		}
		.itemInfo{
			display: flex;
			justify-content: space-between;
			.itemName{
				font-size: 13px;
				margin-right: 10px;
			}
			.collect{
				font-size: 13px;
				width: 130px;
				border-left: 1px solid #efefef;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: gray;
			}
		}
		.freight{
			font-size: 13px;
			color: gray;
			margin: 10px 0;
		}
	}
	
	.goods-carts {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
}


</style>
